import React from 'react';

import {connect} from 'dva';
import {Input, InputNumber, Form, Button, Modal, Tabs, message, Select} from 'antd';
import moment from 'moment';
import RightBox from "../../commons/RightBox";
import RIGHT from "../../../utils/RightConstants";
import Constants from "../../../utils/Constants";
import LgOdBase from './LgOdBase';
import LgOdSi from './LgOdSi';
import LgOdTrailer from './LgOdTrailer';
import LgOdDeclare from './LgOdDeclare';
import OperatorConstant from '../../../utils/OperatorConstant';

moment.locale('zh-cn');
const R = require('ramda');
const TabPane = Tabs.TabPane;
const FormItem = Form.Item;

const logisticsOrderDetail = Form.create()(class PortDetail extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            disabled: false,
            type: "",
            tabs: "1"

        }
    }

    handleOpen = (disabled, type) => {
        this.setState({open: true, disabled, type});
    }


    handleChangeTabe = (key) => {
        this.setState({tabs: key});
    }


    handleCancel = () => {
        this.setState({open: false});
        if (this.lgOdBase) this.lgOdBase.handleResetFields();
        if (this.lgOdSi) this.lgOdSi.handleResetFields();
        if (this.lgOdTrailer) this.lgOdTrailer.handleResetFields();
        if (this.lgOdDeclare) this.lgOdDeclare.handleResetFields();
        this.props.refreshList();
    }

    handleConfirm = () => {
        if (R.equals(OperatorConstant.add, this.state.type)) {
            if (this.lgOdBase) this.lgOdBase.handleConfirm(OperatorConstant.add);

        } else if (R.equals(OperatorConstant.edit, this.state.type)) {
            if (R.equals(this.state.tabs, "1")) {//更新订单基础信息
                if (this.lgOdBase) this.lgOdBase.handleConfirm(OperatorConstant.edit);
            }

            if (R.equals(this.state.tabs, "2")) {//更新订单拖车信息
                if (this.lgOdTrailer) this.lgOdTrailer.handleConfirm(OperatorConstant.edit);
            }

            if (R.equals(this.state.tabs, "3")) {//更新订单报关信息
                if (this.lgOdDeclare) this.lgOdDeclare.handleConfirm(OperatorConstant.edit);
            }

            if (R.equals(this.state.tabs, "4")) {//更新订单补料
                if (this.lgOdSi) this.lgOdSi.handleConfirm(OperatorConstant.edit);
            }

        }

    }



    render() {
        let footer = [];
        if (R.equals(OperatorConstant.add, this.state.type)) {
            footer.push(<Button key="save" size="large" loading={this.props.loading}
                                onClick={this.handleConfirm.bind(this)}>保存</Button>);

        } else if (R.equals(OperatorConstant.edit, this.state.type)) {
            footer.push(<Button key="save" size="large" loading={this.props.loading}
                                onClick={this.handleConfirm.bind(this)}>保存</Button>);
        }

        footer.push(<Button key="cancel" size="large" loading={this.props.loading}
                            onClick={this.handleCancel.bind(this, true)}>{this.state.disabled ? "关闭" : "取消"}</Button>);


        return (
            <Modal maskClosable={false} visible={this.state.open} title={"订单详情"} confirmLoading={this.props.loading}
                   onCancel={this.handleCancel.bind(this)} footer={footer} width={900}>
                <Tabs tabPosition={'top'} onChange={this.handleChangeTabe.bind(this)}>
                    <TabPane tab="基本信息" key="1">
                        <LgOdBase wrappedComponentRef={(inst) => this.lgOdBase = inst}
                                  type={this.state.type}
                                  disabled={this.state.disabled}
                                  handleCancel={this.handleCancel}
                        />
                    </TabPane>

                    {R.equals(OperatorConstant.add, this.state.type) ? null :
                        <TabPane tab="拖车" key="2">
                            <LgOdTrailer wrappedComponentRef={(inst) => this.lgOdTrailer = inst}
                                         dispatch={this.props.dispatch}
                                         disabled={this.state.disabled}
                                         handleCancel={this.handleCancel}
                            />
                        </TabPane>
                    }

                    {R.equals(OperatorConstant.add, this.state.type) ? null :
                        <TabPane tab="报关" key="3">
                            <LgOdDeclare wrappedComponentRef={(inst) => this.lgOdDeclare = inst}
                                         dispatch={this.props.dispatch}
                                         disabled={this.state.disabled}
                                         handleCancel={this.handleCancel}
                            />
                        </TabPane>
                    }

                    {R.equals(OperatorConstant.add, this.state.type) ? null :
                        <TabPane tab="补料" key="4">
                            <LgOdSi wrappedComponentRef={(inst) => this.lgOdSi = inst}
                                    dispatch={this.props.dispatch}
                                    disabled={this.state.disabled}
                                    handleCancel={this.handleCancel}
                            />
                        </TabPane>
                    }

                </Tabs>

            </Modal>
        )
    }
})

function mapStateToProps(state) {
    return {
        loading: state.loading.models.logisticsOrder, logisticsOrder: state.logisticsOrder
    };
}

export default connect(mapStateToProps)(logisticsOrderDetail);